<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JIMO-IOT首页</title>
    <link rel="shortcut icon" href="//jimo.fun/img/my/jm.png"/>
    <link href="../static/css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="../static/css/common.css" type="text/css" rel="stylesheet"/>
    <script src="../static/js/jquery.min.js" type="text/javascript"></script>
    <script src="../static/js/common.js" type="text/javascript"></script>
    <script src="../static/js/notice.js" type="text/javascript"></script>
    <script src="../static/js/regexp.js" type="text/javascript"></script>
    <script src="../static/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <style>
        /* 使用 flexbox 布局，横向排列 */
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* 左右两侧对齐 */
            align-items: stretch; /* 垂直方向占满整个高度 */
            height :100vh;
        }

        /* 前三个页面占整个屏幕宽度的30% */
         iframe:nth-child(-n+3) {
            /*flex: 32% 32% 32%;*/
            width: 32%;
            height: 20vh;
            margin-bottom: 20px; /* 设置页面之间的间隔，根据需要调整 */
        }
        /* 默认样式，适用于较大的屏幕，如电脑 */
        iframe:nth-child(4) {
            flex: 0 0 90%; /* 使用 flex 属性来设置宽度 */
            height: 70vh;
            margin: auto; /* 水平居中 */
        }
        /* 在较小屏幕上纵向排列 */
        @media (max-width: 1000px) {
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between; /* 左右两侧对齐 */
                align-items: stretch; /* 垂直方向占满整个高度 */
                height :100%;
            }
            iframe:nth-child(-n+3) {
                width: 100%; /* 占满整个宽度 */
                height: 10vh;
                margin-bottom: 5px; /* 设置页面之间的间隔，根据需要调整 */
            }
            /* 第四个页面占整个屏幕宽度的60% */
            iframe:nth-child(4) {
                flex: 0 0 90%;
                width: 90%;
                height: 65vh;
                margin: auto; /* 在水平方向上居中 */
            }
        }



        .background-image {
            /*width: 100%; !* 设置 div 的宽度 *!*/
            height: 120%; /* 设置 div 的高度 */
            background-image: url('../static/img/img_1.jpg'); /* 设置背景图片的路径 */
            background-size: cover; /* 背景图片大小适应div，并保持比例 */
            background-position: center; /* 背景图片在 div 中居中显示 */
            background-repeat: no-repeat; /* 禁止背景图片重复显示 */
        }
        /* 定义滚动条的宽度、颜色和圆角 */
        ::-webkit-scrollbar {
            width: 8px; /* 宽度 */
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgba(4, 245, 28, 0.83); /* 滑块颜色 */
            border-radius: 4px; /* 圆角 */
        }

        ::-webkit-scrollbar-track {
            background-color: #f1f1f1; /* 背景颜色 */
        }

        /* 鼠标悬停在滚动条上时的样式 */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #333; /* 滑块颜色变化 */
        }

        /* Firefox 滚动条样式 */
        html {
            scrollbar-width: thin;
            scrollbar-color: #4285f4 #f1f1f1;
        }

        body::-webkit-scrollbar-corner {
            background-color: #f1f1f1;
        }
        .aId {
            display: inline-block;
            font-size: 18px;
            padding: 10px 18px;
            background-color: #dd92e8;
            color: #03ff11;
            text-decoration: none;
            border-radius: 8px;
            border: 2px solid #9911e7;
        }
    </style>

  </head>
<body class="background-image">
<div class="headerNav">
    <div class="headerNavTop">
        <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
    </div>
    <div class="headerNavCont">
        <a href="/login" target="_blank">重新登录！</a>
        <a href="/templates/modules/modules.html">模块信息-中心！</a>
        <a href="/templates/controller/index.html">控制信息-中心！</a>
        <a href="//jimo.fun" target="_blank">JIMO友情🔗</a>
        <a href="/user/login">用户-登录注销！</a>
    </div>
</div>
<div class="container ">
<iframe src="/templates/deviceView/temp.html"  frameborder="no" allowfullscreen="true"></iframe><!--室内温度-->
<iframe src="/templates/deviceView/humidity.html" frameborder="no" allowfullscreen="true"></iframe><!--//室内湿度-->
<iframe src="/templates/deviceView/MQ2.html"  frameborder="no" allowfullscreen="true"></iframe><!--室内空气质量-->

<iframe src="/templates/controller/index.html" frameborder="no" allowfullscreen="true"></iframe>
    <div style="text-align: center;">
        <a href="/templates/modules/modules.html" class="aId">GOTO --》》JIMO-IOT 模块中心！！！ </a>
    </div>

    <div style="text-align: center;">
        <a href="/templates/modulesView/SmartRack.html" class="aId">查看“智能晾衣架”模块！</a>
    </div>
    <div style="text-align: center;">
        <a href="/templates/modulesView/SmartWatering.html" class="aId">查看“智能浇水”模块！</a>
    </div>
    <div style="text-align: center;">
        <a href="/templates/modulesView/SmartWatchdog.html" class="aId">查看“智能门窗（安防）”模块！</a>
    </div>

    <div style="text-align: center;">
        <a href="/templates/modules/smartModule.html" class="aId">查看“智能感知”模块！</a>
    </div>
    <div style="text-align: center;">
        <a href="/templates/controller/index.html" class="aId">GOTO --》》JIMO-IOT 控制中心！！！ </a>
    </div>
    <p class="subheading" style="font-size: 18px;
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;"> <span class="base_footer_text">Copyright © 2022-2024 Power by 己墨的个人世界</span>
        <span class="base_footer_text">ICP备案号：<a href="https://beian.miit.gov.cn" target="_blank">豫ICP备2022001932号-2</a></span></p>
</div>



</body>
</html>
